import React, { useContext, useState } from 'react';
import { useLocation, routerRedux } from 'react-router-dom';
import { connect } from 'dva';
import { Card, Popconfirm, Button, PageHeader } from 'antd';
import { filterAuth } from '@/support/common';
import CommonContext from '@/layouts/CommonContext';

import VehicleTab from './tabs/vehicleTab';
import IpdaTab from './tabs/ipdaTab';
import TboxTab from './tabs/tboxTab';
import SimTab from './tabs/simTab';
import UserTab from './tabs/userTab';
import StatusTab from './tabs/statusTab';
import ReportTab from './tabs/reportTab';
import MessageTab from './tabs/messageTab/index';
import SgwTab from './tabs/sgwTab';
import BluetoothTab from './tabs/bluetoothTab';
interface VehicleDetailPagePorps {
  vehicleInfoQuery: any;
  location: any;
  history: any;
  dispatch: Function
}

interface CommonContext {
  permissions: string[];
}

const vehicleDetailPage: React.FC<VehicleDetailPagePorps> = props => {
  const {
    dispatch,
    vehicleInfoQuery,
    location: { pathname = '/' },
  } = props;

  const goBack = () => {
    const { dispatch } = props;
    dispatch(routerRedux.push({ pathname: '/connectPlat/vehicleInfoQuery', sourcePage: 'vehicleInfoQueryDetail' }));
  }

  if (!vehicleInfoQuery.vin) {
    const savedVehicleInfoQuery = JSON.parse(sessionStorage.getItem('vehicleInfo') ?? '{}');

    if (!savedVehicleInfoQuery?.vin) {
      return (
        <PageHeader title="">
          <div align="center" width="100%" height="100%">
            <h2>未选择任何车机,请返回列表重新选择</h2>
            <a onClick={goBack}>返回</a>
          </div>
        </PageHeader>
      );
    }

    dispatch({
      type: 'vehicleInfoQuery/setVehicleInfo',
      payload: savedVehicleInfoQuery,
    });
  }
  const [current, setCurrent] = useState('');
  const { permissions } = useContext(CommonContext) as CommonContext;
  const location = useLocation();

  const allTabs = [
    {
      tab: '车辆信息',
      key: 'vehicleInfoQueryDetail_vehicle',
      component: () => <VehicleTab />,
      show: true,
    },
    {
      tab: '车机信息',
      key: 'vehicleInfoQueryDetail_ipda',
      component: () => <IpdaTab />,
      show: true,
    },
    {
      tab: 'TBOX信息',
      key: 'vehicleInfoQueryDetail_tbox',
      component: () => <TboxTab />,
      show: true,
    },
    {
      tab: 'SGW信息',
      key: 'vehicleInfoQueryDetail_sgw',
      component: () => <SgwTab />,
      show: ['S73','S59'].includes(vehicleInfoQuery.seriesId),
    },
    {
      tab: '蓝牙模块信息',
      key: 'vehicleInfoQueryDetail_bluetooth',
      component: () => <BluetoothTab />,
      show: ['S73','S59','P59'].includes(vehicleInfoQuery.seriesId),
    },
    {
      tab: 'SIM卡信息',
      key: 'vehicleInfoQueryDetail_simCard',
      component: () => <SimTab />,
      show: true,
    },
    {
      tab: '车主信息',
      key: 'vehicleInfoQueryDetail_owner',
      component: () => <UserTab />,
      show: true,
    },
    {
      tab: '车况',
      key: 'vehicleInfoQueryDetail_vehicleCondition',
      component: () => <StatusTab />,
      show: true,
    },
    {
      tab: '单车报告',
      key: 'vehicleInfoQueryDetail_report',
      component: () => <ReportTab />,
      // 是否展示单车报告模块，设备管理-车辆管理点击VIN号跳转到此详情页面，但不展示单车报告模块
      show: location.state ? false : true,
    },
    {
      tab: '报文解析',
      key: 'vehicleInfoQueryDetail_message',
      component: () => <MessageTab />,
      show: true,
    },
  ];

  const tabs = allTabs.filter(tab => tab.show && filterAuth(tab.key, permissions, pathname));

  const currentTab = tabs.length ? (tabs.find(e => e.key === current) ?? tabs[0]).component() : null;
  return (
    <>
      <Card onTabChange={setCurrent} tabList={tabs}>
        {currentTab}
      </Card>

      <Card style={{ display: 'flex', justifyContent: 'center' }} bordered={false}>
        <Popconfirm title="确定要关闭吗?" onConfirm={goBack}>
          <Button key="back" type="primary">
            关闭
          </Button>
        </Popconfirm>
      </Card>
    </>
  );
};

export default connect(({ vehicleInfoQuery }) => ({
  vehicleInfoQuery,
}))(vehicleDetailPage);
